<template lang="pug">
  .CreateAccountModal
    Modal(
      v-model="isShowCreateOrganizationModal"
      :title="createOrganizationModalTitle"
      class-name="vertical-center-modal"
      width="680"
    )
      Form.ivu-row.has-rules-item2.ivu-form-basic(ref="formData" :model="formData" :rules="rules" :label-width="130")
        FormItem.form-item.ivu-col(v-for="(item, index) of setFormItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop" v-show="item.isShow")
          template(v-if="item.type === 'input'")
            Input(v-model="formData[item.model]" :placeholder="item.placeholder" :disabled="item.isDisabled")
          template(v-if="item.type === 'select'")
            Select(v-model="formData[item.model]" :placeholder="item.placeholder" filterable)
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.value") {{c_item.text}}
          template(v-if="item.type === 'datePicker'")
            DatePicker.w-100(:value="formData[item.model]" :placeholder="item.placeholder" type="date" @on-change="handleChangeDatePicker(item.model, $event)")
          template(v-if="item.type === 'cascader'")
            .areaTree
              Input(v-model="formData[item.model]" v-show="false")
              Cascader(v-model="formData[item.arrModel]" :data="areaTree" clearable @on-change="handleTreeChange" :change-on-select="true")
          template(v-if="item.type === 'switch'")
            i-switch(v-model="formData[item.model]")
      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit") 保存
</template>

<script>
import { Common } from '@/utils/common.js'
import UserApi from '@/api/User.api.js'
import { OrganizationApi } from '@/api/Organization.api.js'
export default {
  name: 'CreateOrganizationModal',

  watch: {
  },

  computed: {
    setFormItem () {
      if (this.formData.type == 1) {
        console.log('1111111111111')
        this.formItem[5].style = 'ivu-col-span-12 is-required'
        if (this.formData.axsEnableSwitch) {
          this.formItem[6].isShow = true
          this.formItem[7].isShow = true
        }
      } else {
        console.log('222222222222')
        this.formItem[5].style = 'ivu-col-span-12'
        this.formItem[6].isShow = false
        this.formItem[7].isShow = false
      }

      if (!this.formData.id) {
        this.formItem[1].isShow = false
      } else {
        this.formItem[1].isShow = true
      }
      return this.formItem
    }
  },

  data () {
    return {
      isShowCreateOrganizationModal: false,
      createOrganizationModalTitle: '',
      basicDataId: null,
      formData: {
        id: '',
        parentId: '',
        parentName: '',
        code: '',
        type: '',
        areaGUID: '',
        areaGUIDArr: [],
        name: '',
        fullName: '',
        providerId: '',
        providerName: '',
        effectTime: '',
        axsEnableSwitch: false,
        enabled: true
      },
      formItem: [
        { type: 'input', label: '上级组织名称：', placeholder: '请输入上级组织名称', prop: 'parentName', model: 'parentName', style: 'ivu-col-span-12', isDisabled: true, isShow: true },
        { type: 'input', label: '组织编码：', placeholder: '请输入组织编码', prop: 'code', model: 'code', style: 'ivu-col-span-12', isDisabled: true, isShow: true },
        { type: 'select', label: '组织类型：', placeholder: '请选择组织类型', prop: 'type', model: 'type', style: 'ivu-col-span-12 is-required', options: 'typeSource', isShow: true },
        { type: 'cascader', label: '所属区域：', placeholder: '请选择所属区域', prop: 'areaGUID', model: 'areaGUID', arrModel: 'areaGUIDArr', style: 'ivu-col-span-12 is-required', isShow: true },
        { type: 'input', label: '组织名称：', placeholder: '请输入组织名称', prop: 'name', model: 'name', style: 'ivu-col-span-12 is-required', isShow: true },
        { type: 'input', label: '组织全称：', placeholder: '请输入组织全称', prop: 'fullName', model: 'fullName', style: 'ivu-col-span-12 is-required', isShow: true },
        { type: 'input', label: '服务提供方ID：', placeholder: '请输入服务提供方ID', prop: 'providerId', model: 'providerId', style: 'ivu-col-span-12 is-required', isShow: true },
        { type: 'input', label: '服务提供方名称：', placeholder: '请输入服务提供方名称', prop: 'providerName', model: 'providerName', style: 'ivu-col-span-12 is-required', isShow: true },
        { type: 'datePicker', label: '生效日期：', placeholder: '请选择生效日期', prop: 'effectTime', model: 'effectTime', style: 'ivu-col-span-12 is-required', isShow: true },
        { type: 'switch', label: '启用安薪税：', placeholder: '请选择是否启用安薪税', prop: 'axsEnableSwitch', model: 'axsEnableSwitch', style: 'ivu-col-span-12 is-required', isShow: false },
        { type: 'switch', label: '启用：', placeholder: '请选择是否启用', prop: 'enabled', model: 'enabled', style: 'ivu-col-span-12 is-required', isShow: true }
      ],
      // setFormItem: null,
      rules: {
      },
      arrListDown: {
        typeSource: []
      },
      areaTree: [] // 中国所有城市树
    }
  },

  mounted () {
    // this.areaTree = JSON.parse(localStorage.getItem('areaTree')) // 获取中国所有城市树
  },

  methods: {
    // 监听所有调用的方法
    listenCall (methodsWords, param) {
      this[methodsWords](param)
    },

    cancel () {
      this.isShowCreateOrganizationModal = false
    },

    show () {
      this.isShowCreateOrganizationModal = true
      this.$refs.formData.resetFields()
      this.areaTree = JSON.parse(localStorage.getItem('areaTree')) // 获取中国所有城市树
      console.log('点击是的show()')
    },

    // 日期选择
    handleChangeDatePicker (model, val) {
      console.log('model: ', model)
      console.log('val: ', val)
      this.formData[model] = val
    },

    // 提交表单
    handleSubmit () {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          console.log('提交表单：', this.formData)
          OrganizationApi.save(this.formData).then(res => {
            if (res.status === 200 && res.data.success) {
              this.isShowCreateOrganizationModal = false
              this.$Message.success(res.data.message)
              this.$emit('handleSubmit')
              this.$emit('queryTreeList')
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        } else {
          this.$Message.warning('输入有误，请返回检查!')
        }
      })
    },

    // 根据ID获取用户信息
    async getModel (id, parentId) {
      // if (!id) {
      //   this.formItem[1].isShow = false
      // } else {
      //   this.formItem[1].isShow = true
      // }
      var params = {
        id: id,
        parentId: parentId
      }
      let res = await OrganizationApi.getModel(params)
      console.log('获取modal res: ', res)
      if (res.status === 200 && res.data.success) {
        var data = res.data.data
        this.arrListDown.typeSource = data.typeSource
        Object.keys(this.formData).forEach(key => {
          if (key == 'axsEnableSwitch' || key == 'enabled') {
            this.formData[key] = data[key]
          } else {
            this.formData[key] = data[key] ? data[key] + '' : ''
          }
        })
        this.formData.areaGUIDArr = this.formData.areaGUID ? this.formData.areaGUID.split(',') : []
        this.formData.areaGUID = this.formData.areaGUIDArr[this.formData.areaGUIDArr.length - 1]
        console.log('this.formData: ', this.formData)
      } else {
        // this.treeData = []
      }
    },

    // 所在地区选择
    handleTreeChange (value, selectedData) {
      console.log('value: ', value)
      console.log('selectedData: ', selectedData)
      this.formData.areaGUIDArr = value
      this.formData.areaGUID = selectedData[selectedData.length - 1].value
    }
  }
}
</script>

<style lang="less" scoped>

</style>
